<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
    <title>登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="${ctx}/script/jquery-1.11.0.js"></script>
    <link rel="stylesheet" href="${ctx}/script/css/bootstrap-theme.css">
    <link rel="stylesheet" href="${ctx}/script/css/bootstrap.css">
    <link rel="stylesheet" href="${ctx }/script/style.css" />	
    <script type="text/javascript" src="${ctx}/script/js/bootstrap.js"></script>
    <script src="${ctx}/js/md5.js"></script>
    <style type="text/css">
    	.error{color: red}
    	.success{color: green}
    	.form-control{
    	margin-bottom:3px;
    	}
    	input[type="button"]{
    	margin-bottom:3px;
    	}
    </style>
</head>
<body lang="zh-cn" style="background-color: #eeeeee">
   <div class="wrapper">
	  <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid" style="background-color:#438EB8">
          <div class="navbar-header">
             <div class="navbar-brand" style="font-size:20px;color:#ffffff;">MICRM管理平台</div>
          </div>
       </div><!-- /.container-fluid -->  
     </div>
	<div class="container" style="width:100%;height:80%;">
		<div class="row" style="margin:5% auto;" align="center">
			<form action="member!login" name="login" method="post">
			   <img src="${ctx }/assets/avatars/front.jpg" height="100px" width="300px" style="margin-bottom:20px;"/>
				<table>
					<tr>
						<td colspan="2">
							<c:if test="${not empty result || result != '' }">
				  				<font color="red">${result }</font>
				  			</c:if>
				  		</td>
				  		<td></td>
					</tr>
					<tr>
						<td colspan="2">
							<c:choose>
								<c:when test="${not empty loginName }">
									<input type="text" class="form-control" name="loginName" id="one" value="${loginName }" onfocus="txtFocus1(this)" onblur="txtBlur1(this)" />
								</c:when>
								<c:otherwise>
									<input type="text" class="form-control" name="loginName" id="one" value="手机号/邮箱" onfocus="txtFocus1(this)" onblur="txtBlur1(this)" />
								</c:otherwise>
							</c:choose>
						</td>
						<td><div align="left" id="one"></div>
						</td>
					</tr>
					<tr>
						<td colspan="2" id="pswText">
							<input type="text" class="form-control"
								name="password" id="two" onfocus="txtFocus2(this)" onblur="txtBlur2(this)" value="密码" style="color: #666666" />
						</td>
						<td><div align="left" id="two"></div>
						</td>
					</tr>
					<tr>
						<td><input type="text" id="three" value="验证码" style="color: #666666"
							class="form-control" />
						</td>
						<td><img src="maccount!validateCode" id="img"
							style="margin-left:5px;height:30px;width:80px"
							onclick="javascript:refresh(this);" />
						</td>
						<td><div align="left" id="info" class="error"></div>
						</td>
					</tr>
					<tr>
						<td colspan="2"><div align="center">
							<input type="button" class="btn btn-lg btn-primary btn-block" id="but" value="登录"/>
						  </div>
						</td>
						<td></td>
					</tr>
					<tr>
						<td colspan="2"><div align="center">
							<a class="btn btn-lg btn-success btn-block" href="${ctx}/ucenter/ucenter_registe.jsp">注册</a>
						  </div>
						</td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td colspan="2">
							<a href="${ctx}/findpassword/repassword.jsp">忘记密码</a>
							<!--
							&nbsp;&nbsp;
							<a href="${ctx}/functionaction!tempMethod">脚本</a>
							-->
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
	 <div class="push"></div>
    </div>
	<c:import url="/collect/down.jsp"></c:import>
</body>
<script type="text/javascript">
		function refresh(obj) {
			obj.src = "maccount!validateCode?t=" + Math.random();
		}
		
		function txtFocus1(e) {
			if (e.value == '手机号/邮箱') {
				e.value = "";
				e.style.color = "";
			}
		}
		
		function txtBlur1(e){
			if(!e.value){
				e.value = "手机号/邮箱";
				e.style.color = "#666666";
			}
		}
		
		function txtFocus2(e) {
			if (e.value == '密码') {
				e.value = "";
				e.type = "password";
			}
		}
		
		function txtBlur2(e){
			if(!e.value){
				e.value = "密码";
				e.type = "text";
			}
		}

		$(document).ready(function() {
			var sub = true;
			
			$("input[id='three']").focus(function() {
				if ($("input[id='three']").val() == '验证码') {
					$("input[id='three']").val("");
					$("input[id='three']").css("color","");
				}
			});
			
			$("input[id='three']").blur(function() {
				if($("input[id='three']").val() == ''){
					$("input[id='three']").val("验证码");
					$("input[id='three']").css("color","#666666");
				}
				
				if ($("input[id='three']").val() != '' && $("input[id='three']").val() != '验证码') {
					var three = $("#three").val();
					$.ajax({
						async: false,
						url : "maccount!checkCode",
						type: "post",
						data : {
							"checkCode" : three
						},
						datatype : "json",
						success : function(data) {
							var map = eval("(" + data + ")");
							if (map.temp == "success") {
								sub = true;
							} else {
								sub = false;
								alert("验证码有误！");
							}
						},
						error : function(request) {
							sub = false;
							alert("Connection error");
						}
					});
				}
			});

			$("#but").click(function() {
				var one = $("#one").val();
				if (one.length == 0 || one == '手机号/邮箱') {
					alert("请输入手机号/邮箱");
					$("#one").focus();
					return false;
				}
				var two = $("#two").val();
				if (two.length == 0 || two == '密码') {
					alert("请输入密码");
					$("#two").focus();
					return false;
				}
				var three = $("#three").val();
				if (three.length == 0 || three == '验证码') {
					alert("请输入验证码");
					$("#three").focus();
					return false;
				}

				if (sub) {
					$("#two").val(faultylabs.MD5($("#two").val()));
					login.submit();
				} else {
					alert("验证码有误！");
				}
			});
			//键盘回车事件模拟鼠标点击事件
			$(document).keydown(function(e){
				if((e.keyCode==13)){
					$("#but").click();
				}
			});
		});
	</script>
</html>
